<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>The CheckBox Tree and cbtree/data File Store</title>

     <style type="text/css">
      @import "../../../dijit/themes/claro/claro.css";
      @import "../../../dijit/themes/claro/document.css";
      @import "../../../dijit/tests/css/dijitTests.css";
      @import "../../../dojox/grid/resources/claroGrid.css";
      @import "../../../cbtree/icons/fileIconsMS.css";
      @import "../../themes/claro/claro.css";

      html,body { height: 100%; margin: 0; overflow: hidden; padding: 0; }
      #appLayout { height: 100%; }
    </style>

    <script type="text/javascript">
      var dojoConfig = {
            async: true,
            parseOnLoad: false,
            isDebug: true,
            baseUrl: "../../../",
            packages: [
              { name: "dojo",  location: "dojo" },
              { name: "dojox", location: "dojox" },
              { name: "dijit", location: "dijit" },
              { name: "cbtree",location: "cbtree" }
            ]
      };
    </script>

    <script type="text/javascript" src="../../../dojo/dojo.js"></script>
    <script>
      require([ "dojo/_base/lang",
                "dojox/grid/DataGrid",
                "dojo/parser",
                "dojo/domReady!"
              ], function (lang, DataGrid, parser) {

        // Overwrite the store event handlers of the DataGrid
        lang.extend( DataGrid, {
          _onDelete: function() {},
          _onNew: function() {},
          _onSet: function() {}
        });
        parser.parse();
      });
    </script>

    <script>
      require([ "dojo/_base/connect",
                "dijit/layout/BorderContainer",
                "dijit/layout/TabContainer",
                "dijit/layout/ContentPane",
                "cbtree/Tree",                   // Checkbox Tree
                "cbtree/extensions/TreeStyling", // Tree Styling extensions
                "cbtree/models/FileStoreModel",  // Forest Store Model
                "cbtree/data/FileStore",         // File Store
                "cbtree/data/BreadCrumb"         // Breadcrumb trail
              ]);
    </script>

    <script type="text/javascript">
      var sortFields = [{attribute:"directory", descending:true},{attribute:"name", ignoreCase:true}];
      var queryOptions = { deep: true, storeOnly: true };
      var layoutFiles = [
        [
          { field: "name", name: "Filename", width: 20 },
          { field: "size", name: "File Size (bytes)", width: 10 },
          { field: "directory", name: "Is Directory", width: 10 },
          { field: "path", name: "Path", width: 'auto' }
        ]
      ];

      function pathToRegex( path ) {
        // summary:
        //    Convert a path string into a regular expression (not a pattern)...
        var segm  = path.split("/");
        var regex = "(^\\.";
        var i;

        for( i=0; i<segm.length; i++) {
          if (segm[i] !== ".") {
            regex = regex + "\\/" + segm[i];
          }
        }
        regex = regex + "\\/[^\\/]*$)"
        return regex;
      }

      function setQuery( path ) {
        // summary:
        //    Set and execute the new query string for the grid and update
        //    the breadcrumb trail.
        grid.setQuery( {path: pathToRegex(path)}, queryOptions );
        grid.selection.deselectAll();
        trail.setTrail( path );
      }

      function updateGrid( item ) {
        // summary:
        //    Update the grid with the new item data. If the item is currently
        //    not loaded in the store go load it first.
        if (!store.isItemLoaded(item)) {
          store.loadItem( { item: item,  onItem: updateGrid });
        } else {
          setQuery( store.getValue(item,"path") );
        }
      }

      function treeClicked( item, nodeWidget, evt ) {
        if (nodeWidget !== tree.rootNode) {
          updateGrid( item );
        } else {
          setQuery( "." );
        }
      }

      function gridClicked(rowIndex) {
        var item = grid.getItem(rowIndex);
        if (item.directory) {
          updateGrid(item);
        }
      }
    </script>
  </head>

  <body class="claro">
    <div data-dojo-id="store" data-dojo-type="cbtree/data/FileStore" data-dojo-props='url:"../../store/server/PHP/cbtreeFileStore.php", cache:false, options:["iconClass"]'></div>

		<div data-dojo-id="model" data-dojo-type="cbtree/models/FileStoreModel" data-dojo-props='store:store,
			query:{directory:true}, queryOptions:{ignoreCase:true}, rootLabel:"My Files", labelAttr:"name",
			iconAttr:"icon", checkedStrict:false'>
		</div>

    <div id="appLayout" class="demoLayout" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'">
      <div class="edgePanel edgeTop" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top'">
        <div data-dojo-id="trail" data-dojo-type="cbtree/data/BreadCrumb" data-dojo-props='store:store,
         cssBaseClass:"fileIcon"' onClick=updateGrid style="width: 100%; height:32px;"></div>
      </div>
      <div class="edgePanel" data-dojo-type="dijit.layout.ContentPane"
           data-dojo-props="region: 'left', splitter: true" style="width:25%;">
        <div data-dojo-id="tree", data-dojo-type="cbtree/Tree" data-dojo-props='model:model,
          checkBoxes:false, icon:"fileIcon", onClick: treeClicked, persist:false'>
        </div>
      </div>

      <div id="mainLevel" class="centerPanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">
        <div data-dojo-id="grid" data-dojo-type="dojox/grid/DataGrid" data-dojo-props='store:store,
         structure:layoutFiles, query:{path:pathToRegex(".")}, queryOptions: queryOptions,
         sortFields: sortFields, selectionMode:"single", onSelected:gridClicked'
         style="width: 99%; height:500px;">
        </div>

      </div>
    </div>
  </body>
</html>
